<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <div
      class="test"
      v-bind:class="[isActive ? 'active' : '',isGreen ? 'green' : '']"
      style="width:200px; height:200px; text-align:center; line-height:200px;">
        hi vue
    </div>

    <div
            :style="{color:color,fontSize:size,background: isRed ? '#FF0000' : ''}"
      >
      hi vue
    </div>
  </div>

  <script type="text/javascript">
      var vm = new Vue({
        el : "#app",
        data: {
          isActive: true,
          isGreen: true,
          color: "#FFFFFF",
          size: '50px',
          isRed: true
        }
      });
  </script>
  <style>
    .test{font-size:30px}
    .green{color:#00FF00}
    .active{background: red}
  </style>
</body>
</html>
